<template>
  <div class="sysdic-item" v-show="isShowSysDic">
    <el-dialog
        title="字典项管理"
        :visible.sync="isShowSysDic"
        @close="dictionaryClose"
        append-to-body="true"
        customClass="cstomWidthItem">
      <div class="add-button-box">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addDicItem()"
                   v-if="permissions.indexOf('dictItem_sysDict_add') > -1">添加
        </el-button>
        <!-- <el-button slot="mini" circle icon="el-icon-refresh" @click="refresh()"></el-button> -->
        <el-tooltip effect="dark" content="刷新" placement="top-start">
          <el-button class="float-right" size="small" circle icon="el-icon-refresh"
                     @click="refresh()"></el-button>
        </el-tooltip>
      </div>
      <el-container>
        <el-main>
          <el-table
              border
              stripe
              size="mini"
              :data="tableData"
              ref="sysDictTable"
              style="width: 100%">
            <el-table-column label="序号" type="index" width="50" align="center">
              <template slot-scope="scope">
                <span>{{scope.$index+(pageInfo.current - 1) * pageInfo.pageSize + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="类型" prop="type" align="center"></el-table-column>
            <el-table-column label="数据值" prop="value" align="center"></el-table-column>
            <el-table-column label="标签名" prop="label" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="描述" prop="description" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="排序" prop="sort" align="center"></el-table-column>
            <el-table-column label="备注信息" prop="remarks" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="140px">
              <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-edit" @click="edit(scope.row)"
                           v-if="permissions.indexOf('dictItem_sysDict_edit') > -1">编辑
                </el-button>
                <el-button type="text" size="small" icon="el-icon-delete" @click="del(scope.row)"
                           v-if="permissions.indexOf('dictItem_sysDict_del') > -1">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              :style="{float: 'right', padding: '20px'}"
              class="pageBar"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.current"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="pageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total">
          </el-pagination>
          <el-dialog
              :title="title" width="740px"
              :visible.sync="showDicItemDlog"
              :close-on-click-modal="false"
              @close="closeDialog"
              append-to-body="true">
            <el-container>
              <el-main>
                <el-form
                    :inline="true"
                    ref="formItem"
                    :model="form"
                    label-width="100px"
                    :rules="rules">
                  <el-form-item label="类型" prop="type">
                    <el-input placeholder="请输入类型" v-model="form.type"/>
                  </el-form-item>
                  <el-form-item label="数据值" prop="value">
                    <el-input placeholder="请输入数据值" v-model="form.value"/>
                  </el-form-item>
                  <el-form-item label="标签名" prop="label">
                    <el-input placeholder="请输入标签名" v-model="form.label"/>
                  </el-form-item>
                  <el-form-item label="描述" prop="description">
                    <el-input placeholder="请输入描述" v-model="form.description"/>
                  </el-form-item>
                  <el-form-item label="排序" prop="sort">
                    <el-input placeholder="请输入排序号" v-model="form.sort"/>
                  </el-form-item>
                  <el-form-item label="备注信息" prop="remarks">
                    <el-input placeholder="请输入备注信息" v-model="form.remarks"/>
                  </el-form-item>
                </el-form>
              </el-main>
            </el-container>
            <div slot="footer" class="dialog-footer">
              <el-button icon="el-icon-circle-plus-outline" size="small" @click="saveForm" type="primary">
                确 定
              </el-button>
              <el-button icon="el-icon-circle-close" size="small" @click="closeDialog">取 消</el-button>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-dialog>
  </div>
</template>
<script>
import sysDictApi from "./api/sysDict.service";

export default {
  data() {
    return {
      dictType: "",
      rules: {
        type: [
          {
            required: true,
            message: "类型不能为空！"
          },
          {
            pattern: /^[a-zA-Z_]{1,}$/,
            message: "只允许字母以及下划线",
            trigger: "blur"
          }
        ],
        value: [
          {
            required: true,
            message: "数据值不能为空！"
          },
          {
            pattern: /^[0-9]*$/,
            message: "只允许数字",
            trigger: "blur"
          }
        ],
        label: [
          {
            required: true,
            message: "标签名不能为空！"
          }
        ],
        description: [
          {
            required: true,
            message: "描述不能为空！"
          }
        ],
        sort: [
          {
            required: true,
            message: "排序不能为空！"
          },
          {
            pattern: /^[0-9]*$/,
            message: "只允许数字",
            trigger: "blur"
          }
        ],
        remarks: [
          {
            required: true,
            message: "备注信息不能为空！"
          }
        ]
      },
      permissions: JSON.parse(sessionStorage.getItem('permissions')),
      title: "",
      showDicItemDlog: false,
      isShowSysDic: false,
      tableData: [],
      form: {
        dictType: "",//字典类型
        type: "", // 字典项类型
        value: "", // 	数据值
        dictId: "", // 所属字典ID
        label: "", // 标签名
        description: "", // 描述
        sort: "", // 排序
        remarks: "" // 备注
      },
      pageInfo: {
        current: 1,
        pageSize: 5,
        total: 0
      }
    };
  },
  created() {
  },
  methods: {
    show(dictId, dictType) {
      this.dictType = dictType;
      this.isShowSysDic = true;
      this.form.dictId = dictId;
      this.dictId = dictId;
      this.initDate(dictId);
    },
    // 初始化数据
    initDate(dictId) {
      let _this = this;
      let params = Object.assign({
        dictId: dictId,
        current: this.pageInfo.current,
        size: this.pageInfo.pageSize
      });
      sysDictApi.getSysDictList(params).then(res => {
        _this.pageInfo.current = res.data.current;
        _this.pageInfo.pageSize = res.data.size;
        _this.pageInfo.total = res.data.total;
        _this.tableData = res.data.records;
      });
    },
    // 添加
    addDicItem() {
      this.title = "添加";
      this.showDicItemDlog = true;
    },
    // 编辑
    edit(row) {
      let obj = row;
      this.form = row;
      this.title = "编辑";
      this.showDicItemDlog = true;
    },
    // 删除
    del(row) {
      // delSysDictItem
      let _this = this;
      this.$confirm("本操作将永久删除字典项，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        sysDictApi.delSysDictItem(row.id, this.dictType).then(res => {
          if (res.data > 0) {
            _this.$message.success("删除字典项成功！");
            _this.initDate(row.dictId);
          } else {
            _this.$message.error(res.msg);
          }
        });
      });
    },
    // 保存
    saveForm() {
      let _this = this;
      this.form.dictType = this.dictType;
      this.$refs["formItem"].validate(valid => {
        if (valid) {
          if (this.title === "添加") {
            sysDictApi.addSysDictItem(this.form).then(res => {
              if (res.code == 10200) {
                _this.$message.success("添加成功！");
                _this.initDate(this.form.dictId);
                _this.closeDialog();
              } else {
                _this.$message.error(res.msg);
              }
            });
          } else {
            sysDictApi.editSysDictItem(this.form).then(res => {
              if (res.code == 10200) {
                this.$message.success("修改成功！");
                _this.initDate(this.form.dictId);
                _this.closeDialog();
              } else {
                _this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    // closeDialog
    dictionaryClose() {
      this.isShowSysDic = false;
    },
    // 关闭
    closeDialog() {
      let obj = {
        type: "",
        value: "",
        dictId: this.form.dictId,
        label: "",
        description: "",
        sort: "",
        remarks: ""
      };
      this.form = obj;
      this.$refs["formItem"].resetFields();
      this.showDicItemDlog = false;
    },
    // 改变页码
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.initDate(this.form.dictId);
    },
    handleCurrentChange(val) {
      this.pageInfo.current = val;
      this.initDate(this.form.dictId);
    },
    // 刷新
    refresh() {
      this.pageInfo = {
        current: 1,
        pageSize: 5,
        total: 0
      };
      this.initDate(this.form.dictId);
    }
  }
};
</script>
<style>
  .cstomWidthItem {
    width: 80% !important;
  }

  .add-button-box {
    position: relative;
    padding-left: 20px;
  }

  .add-button-box .float-right {
    position: absolute;
    right: 20px;
  }
</style>
